Vue系列(五)之常用指令v

2024-07-15 15:21| 来源: 网络整理| 查看: 265

v-on指令缩写用法传参修饰符stopprevent其它

缩写

v-on指令的缩写为：@，通常缩写用的较多。

用法

v-on api

参数是event事件，v-on:click="xx"或@click=“xx”；v-on:change="xx"或@change="xx"等

click a b c

方法写在Vue实例选项的methods对象中。

var vm = new Vue({ el: '#app', methods: { click() { console.log('===click') }, change(e){ console.log(e.target.value) } } }); 传参

click事件可以传参，change和input事件有默认的参数。

click clickSon(param){ console.log('====clickSon',param) }, 修饰符 stop

添加stop修饰符可以阻止冒泡。来看一个例子：

click methods:{ clickParent(){ console.log('===clickParent') }, clickSon(){ console.log('====clickSon') } }

父和子都有点击事件,由于事件的冒泡机制，点击子元素会同时触发子元素和父元素的点击事件：在这里插入图片描述这显然不是我们想要的，添加.stop修饰符即可解决问题：

在这里插入图片描述

prevent

阻止默认行为，例如阻止a标签的跳转行为：

baidu aClick(){ console.log('aClick') }

可以看到log打印了出来，但是a标签没有跳转到百度。在这里插入图片描述

其它

常用的修饰符也就这两个了，到目前为止，我也只用过这两个，至于其它的修饰符，读者可以参考官方文档

【本文地址】

今日新闻